<template>
	<view class="businessshop_wp" id="businessshop_wp">
		<!-- <image class="businessshop_bg" src="./static/nav_bg2.jpg" mode="widthFix"></image> -->
		<view class="b_search">
			<input type="text" placeholder="请输入商品名" v-model="keyword" />
			<view @click="searchTap">搜索</view>
		</view>
		<view class="businessshop_body">
			<view class="businessshop_shop">
				<view class="b_s_info">
					<image :src="hadeShop.logo" mode=""></image>
					<view class="b_s_i_t">
						<view class="b_s_name">{{hadeShop.supname}}</view>
						<!-- <view class="b_s_salesvolume">
							<text>在售：&nbsp;44</text>
							<text>已售：&nbsp;44</text>
						</view> -->
					</view>
				</view>
				<view class="b_s_shar" @click="onshare"><text class="iconfont icon-fenxiang4"></text>分享</view>
			</view>
			<view class="businessshop_server">
				<text>简介</text>
				<text>{{hadeShop.introduce}}</text>
			</view>
			<view class="businessshop_server">
				<text>服务</text>
				<text>正品保证，48小时发货，7天无理由</text>
			</view>
			<view class="businessshop_coupon">
				<!-- <text>服务</text>
				<text>100减5</text> -->
			</view>

			<view class="businessshop_list">
				<view class="b_l_nav">
					<view class="b_l_n_item" :class="{nav_active:navactive==1}" @click="navTap(1)">综合</view>
					<view class="b_l_n_item" :class="{nav_active:navactive==2}" @click="navTap(2)">
						<text>销量</text>
						<image :src="navImage2" mode=""></image>
					</view>
					<view class="b_l_n_item" :class="{nav_active:navactive==3}" @click="navTap(3)">
						<text>价格</text>
						<image :src="navImage3" mode=""></image>
					</view>
					<view class="b_l_n_item" @click="toggleCateMask('show')">
						<text>筛选</text>
						<image style="width: 20upx;height: 20upx;margin-left: 5upx;" src="./static/screen.png" mode="">
						</image>
					</view>
				</view>
				<view class="b_l_shop">
					<view class="b_l_s_item" v-for="item in list" :key="item.id"
						@click="$navTo('../product/product?id='+item.id)">
						<image :src="item.thumb" mode=""></image>
						<view class="b_l_s_i_name">
							{{item.title}}
						</view>
						<view class="b_l_s_i_user_w">
							<view class="b_l_s_i_user" v-if="item.ourmoney">
								自购返&nbsp;￥{{item.ourmoney}}
							</view>
						</view>

						<view class="b_l_s_i_money">
							<text class="b_l_s_i_new"><text
									style="font-weight: normal;font-size: 22upx;">￥</text>{{item.saleprice}}</text>
							<text class="b_l_s_i_old">￥{{item.productprice}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''"
			@click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="(item,key) in categoryList">
						<view class="cate-item b-b two">{{item.name}}</view>
						<view class="cate-item b-b" v-for="(iitem,index) in item.children"
							:class="{active: iitem.id==cateid}" @click="changeCate(iitem)">
							{{iitem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="loading_message">
			<image v-if="loading" src="/static/business/loading.gif" mode=""></image>
			<text v-if="empty">没有更多了~</text>
		</view>
		<view v-show="plashow" class="platop-css" @click="platop">
			<image src="../../static/pla.png" mode="widthFix"></image>
			<view>顶部</view>
		</view>

		<view class="shar_image" v-if="issharimage" @click.stop="issharimage=false">
			<!-- #ifdef H5 -->
			<image @click.stop="" :src="sharImag" mode="widthFix"></image>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<image @longpress="tosave" @click.stop="" :src="sharImag" mode="widthFix"></image>
			<!-- #endif -->
		</view>

		<!-- <shar-msg :cont="cont" :msgbol="msgbol" @wayClick="toShar($event)"></shar-msg> -->
		<bottom-tab/>
	</view>
</template>

<script>
	import BottomTab from '@/components/bottomtab.vue';
	// import sharMsg from '../detail/components/shar-msg.vue';
	// import AppShar from '../product/components/AppShar.js';
	export default {
		components: {
			// sharMsg,
			BottomTab
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				categoryList: [],
				cateid: '',

				navactive: 1,
				navImage2: '/static/business/jian.png',
				navImage3: '/static/business/jian.png',

				height: uni.getSystemInfoSync().windowHeight,

				uid: '',
				hadeShop: {},
				list: [],
				ccate: '',
				order: '',
				by: '',
				
				keyword:'',

				page: 0,
				stopPage: false,
				loading: false,
				empty: false,

				plashow: false,

				sharImag: '',
				issharimage: false,
				
				shareinfo:{},

				msgbol: false,
				cont: [{
						src: '/static/shar-fangshi/weixin.png',
						title: '微信'
					}, {
						src: '/static/shar-fangshi/PongY.png',
						title: '朋友圈'
					}, {
						src: '/static/shar-fangshi/shar_haibao.png',
						title: '海报'
					},
					{
						src: '/static/shar-fangshi/copy.png',
						title: '复制链接'
					}
				]
			}
		},
		onLoad(option) {
			this.uid = option.uid;
			this.hadeShopInfo();
			this.getList();
			this.getcateListInfo();
			this.getsharImg();
		},
		onPageScroll() {
			var top = '';
			const query = uni.createSelectorQuery().in(this);
			query.select('#businessshop_wp').boundingClientRect(data => {
				if (data.bottom <= this.height * 2) {
					this.getList();
				}
				top = data.top;
				this.plashow = top <= 120 ? true : false;
			}).exec();
		},
		methods: {
			searchTap(){
				this.page = 0;
				this.list = [];
				this.stopPage = false;
				this.getList();
			},
			getsharImg() {
				this.$axios('supplierGoods/main','POST','shop',{uid:this.uid}).then(res=>{
					if(res.data.code==200){
						this.sharImag=res.data.data;
					}
				})
			},
			getcateListInfo() {
				this.$axios('supplierGoods/cate', 'POST', 'shop', {
					supplier_uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.categoryList = res.data.data;
					}
				})
			},
			getList() {
				if (this.stopPage) return;
				this.stopPage = true;
				this.loading = true;
				this.empty = false;
				this.page++;
				this.$axios('supplierGoods/goodsList', 'POST', 'shop', {
					supplier_uid: this.uid,
					page: this.page,
					ccate: this.ccate,
					order: this.order,
					by: this.by,
					keyword:this.keyword
				}).then(res => {
					this.loading = false;
					if (res.data.code == 200) {
						this.list = this.list.concat(res.data.data);
						if (res.data.data.length > 0) {
							this.stopPage = false;
						} else {
							this.stopPage = true;
							this.empty = true;
						}
					}
				})
			},
			hadeShopInfo() {
				this.$axios('info/main', 'POST', 'supplier', {
					supplier_uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.hadeShop = res.data.data;
						// #ifdef H5
						var surl = window.location.href.split('/#').join('');
						this.$share(surl, 'supplier', this.uid, this.hadeShop.supname, this.hadeShop.logo)
						// #endif
						
						// #ifdef APP-PLUS
						let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
						let curRoute = routes[routes.length - 1].route;
						var surl = 'https://h5.jiujiubaopin.com/' + curRoute + '?uid=' + this.uid;
						this.$axios('WxInfo/getConfig', 'POST', 'shop', {
							url: surl,
							type: 'supplier',
							cid: this.uid,
							title: this.hadeShop.supname,
							img: this.hadeShop.logo
						}).then(res => {
							if(res.data.code==200){
								this.shareinfo=res.data.data.shareinfo;
							}
						})
						// #endif
					}
				})
			},
			tosave(e) {
				var that = this;
				uni.showModal({
					title: '海报保存',
					content: '确定要保存海报吗',
					success: e => {
						if (e['confirm']) {
							uni.saveImageToPhotosAlbum({
								filePath: that.sharImag,
								success: function(e) {
									uni.showToast({
										title: '海报保存成功',
										duration: 2200
									});
								},
								fail(res) {
									that.$api.msg(res.errMsg)
								}
							});
						}
					}
				});
			},
			toShar(e) {
				var that=this;
				this.msgbol = !this.msgbol;
				if (e == 'shar') {
					return false;
				}
				if (e == 2) {
					this.issharimage = true;
					return;
				}
				if (e == 3) {
					uni.setClipboardData({
						data: that.shareinfo.url,
						success: function() {
							that.$api.msg('复制成功')
						},
						fail(e) {
							console.log(e);
							that.$api.msg('复制失败')
						}
					});
					return ;
				}
				var sharobj = {
					provider: 'weixin',
					type: 0,
					title: this.shareinfo.title,
					scene: '',
					summary: this.shareinfo.desc,
					href: this.shareinfo.url,
					imageUrl: this.shareinfo.imgurl,
					miniProgram: {}
				};
				
				if (e == 0) {
					sharobj.scene = 'WXSceneSession';
				}
				if (e == 1) {
					sharobj.scene = 'WXSenceTimeline';
				}
				AppShar(sharobj);
				
			},
			onshare() {
				// #ifdef H5
				this.issharimage = true;
				// #endif
				// #ifdef APP-PLUS
				this.msgbol = true;
				// #endif
			},
			navTap(v) {
				if (v == 1 && this.navactive == 1) return;
				this.navactive = v;
				if (v == 1) {
					this.navImage2 = this.navImage3 = '/static/business/jian.png';
					this.order = '';
					this.by = '';
				}
				if (v == 2) {
					this.order = 'sales';
					this.navImage3 = '/static/business/jian.png';
				}
				if (v == 3) {
					this.order = 'marketprice';
					this.navImage2 = '/static/business/jian.png';
				}
				this['navImage' + v] = this['navImage' + v] == '/static/business/jian.png' ?
					'/static/business/jian2.png' : this['navImage' + v] == '/static/business/jian2.png' ?
					'/static/business/jian1.png' : '/static/business/jian2.png';
				if (v != 1) this.by = this['navImage' + v] == '/static/business/jian2.png' ? 'desc' : 'asc';
				this.page = 0;
				this.list = [];
				this.stopPage = false;
				this.getList();
			},
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			platop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 30
				})
			},
			changeCate(v) {
				this.page = 0;
				this.list = [];
				this.ccate = v.id;
				this.stopPage = false;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.getList();
			},
			stopPrevent() {},
		}
	}
</script>

<style lang="scss">
	@import '/store/iconfont.css';

	page {
		background: url(./static/nav_bg2.jpg) no-repeat left top, rgb(250, 249, 247);
		background-size: 100% auto;
		color: $font-color-dark;
		padding-bottom: 130upx;
	}

	.businessshop_bg {
		width: 100%;
		padding-bottom: 130upx;
	}

	.businessshop_body {
		background-color: #fff;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		margin: 30upx 15upx 30upx;
		padding: 20upx 0;
	}

	.businessshop_shop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 20upx 10upx;
	}

	.b_s_info {
		display: flex;
		line-height: 50upx;
	}

	.b_s_info image {
		border-radius: 10upx;
		margin-right: 10upx;
		height: 90upx;
		width: 90upx;
	}

	.b_s_i_t {
		display: flex;
		align-items: center;
	}

	.b_s_name {
		font-weight: bold;
		font-family: '思源黑体';
		font-size: 32upx;
	}

	.b_s_salesvolume {
		color: #f48611;
		font-size: 22upx;
	}

	.b_s_salesvolume text {
		margin-right: 30upx;
	}

	.b_s_shar {
		background: linear-gradient(to bottom, #fb4169, #f66c6f);
		color: #fff;
		line-height: 60upx;
		padding: 0 30upx;
		border-radius: 30upx;
		font-size: $font-base;
		letter-spacing: 1px;
	}

	.b_s_shar text {
		vertical-align: middle;
		font-size: 40upx;
		line-height: 52upx;
	}

	.businessshop_server,
	.businessshop_coupon {
		padding: 0 20upx;
		font-size: 22upx;
		margin-bottom: 10upx;
	}

	.businessshop_server text:nth-of-type(1),
	.businessshop_coupon text:nth-of-type(1) {
		color: $font-color-light;
		margin-right: 30upx;
	}

	.businessshop_coupon {
		padding-top: 10upx;
	}

	.businessshop_coupon text:nth-of-type(2) {
		background: #ffeef3;
		border: 1px #fff8f5 solid;
		border-radius: 6upx;
		color: $base-color;
		display: inline-block;
		font-size: $font-sm;
		padding: 0 20upx;
		letter-spacing: 1px;
		line-height: 40upx;
	}
	.b_search{
		display: flex;
		align-items: center;
		margin: 20upx 20upx 0;
		position: relative;
		z-index: 10;
	}
	.b_search input{
		background-color: #f2f2f2;
		border-radius: 40upx;
		color: #666;
		font-size: 26upx;
		padding: 0 30upx;
		height: 60upx;
		flex: 1;
	}
	.b_search view{
		background-color: #cccccc;
		line-height: 60upx;
		border-radius: 10upx;
		padding: 0 30upx;
		margin-left: 20upx;
	}

	.businessshop_list {
		border-top: 1px hsl(0, 0%, 87%) solid;
		padding: 0 20upx;
		margin: 20upx 0;
	}

	.b_l_nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 90upx;
		font-size: $font-base;
	}

	.b_l_n_item,
	.b_l_shop {
		display: flex;
		align-items: center;
	}

	.b_l_n_item image {
		height: 36upx;
		width: 36upx;
	}

	.nav_active {
		color: $base-color;
	}

	.b_l_shop {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.b_l_s_item {
		width: 336upx;
		padding-bottom: 30upx;
	}

	.b_l_s_item image {
		border-radius: 20upx;
		height: 336upx;
		width: 100%;
	}

	.b_l_s_i_name {
		font-weight: bold;
		font-family: '思源黑体';
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		letter-spacing: 1px;
	}

	.b_l_s_i_user_w {
		line-height: 36upx;
		height: 36upx;
		font-size: 20upx;
		margin: 6upx 0 8upx;
	}

	.b_l_s_i_user {
		background-color: rgb(241, 215, 156);
		color: rgb(142, 66, 0);
		display: inline-block;
		padding: 2upx 10upx;
		border-radius: 8upx;

	}

	.b_l_s_i_money {
		color: $base-color;
	}

	.b_l_s_i_new {
		font-size: 36upx;
		font-weight: bold;
	}

	.b_l_s_i_old {
		color: $font-color-light;
		font-size: 22upx;
		margin-left: 10upx;
		text-decoration: line-through;
	}

	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 600;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
			padding-bottom: 60px;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	.loading_message {
		text-align: center;
		color: #0062CC;
	}

	.loading_message image {
		height: 60upx;
		width: 60upx;
	}

	.platop-css {
		width: 70upx;
		height: 70upx;
		position: fixed;
		bottom: 200upx;
		right: 40upx;
		z-index: 799;
		border-radius: 50%;
		font-size: 22upx;
		text-align: center;
		line-height: 6upx;
		background-color: rgba(255, 255, 255, 0.7);
		color: #8a8a8a;
		border: 1px #8a8a8a solid;
		font-weight: 900;

		image {
			width: 65%;
			border-radius: 50%;
		}
	}

	.shar_image {
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: var(--window-top);
		width: 100%;
		height: 100%;
		z-index: 900;
	}

	.shar_image image {
		border-radius: 10px;
		width: 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
